<template>
  <div class="expert-age">
    <echarts
      :chartStyle="{
        height: '33vh',
      }"
      :option="option"
    ></echarts>
  </div>
</template>
<script>
import { mountComponent } from "@/utils";
import { Echarts } from "../components";
import DefaultTooltip from "../tooltip/default.vue";

export default {
  components: {
    Echarts,
  },
  data() {
    return {
      option: {},
      chartData: [],
      colorList: [],
    };
  },
  mounted() {
    this.initOption();
  },
  methods: {
    initOption() {
      let datas = [
        {
          name: "雨伞",
          value: 30,
        },
        {
          name: "晴天",
          value: 28,
        },
        {
          name: "电话",
          value: 24,
        },
        {
          name: "手机",
          value: 23,
        },
        {
          name: "下雨",
          value: 22,
        },
        {
          name: "暴雨",
          value: 21,
        },
        {
          name: "多云",
          value: 20,
        },
        {
          name: "雨衣",
          value: 29,
        },
        {
          name: "屋檐",
          value: 28,
        },
        {
          name: "大风",
          value: 27,
        },
        {
          name: "台风",
          value: 26,
        },
        {
          name: "下雪",
          value: 25,
        },
        {
          name: "打雷",
          value: 24,
        },
        {
          name: "小雨",
          value: 30,
        },
        {
          name: "中雨",
          value: 18,
        },
        {
          name: "大雨",
          value: 14,
        },
        {
          name: "雷阵雨",
          value: 13,
        },
        {
          name: "下雪",
          value: 12,
        },
        {
          name: "小雪",
          value: 11,
        },
        {
          name: "中雪",
          value: 10,
        },
        {
          name: "大雪",
          value: 9,
        },
        {
          name: "暴雪",
          value: 8,
        },
        {
          name: "东风",
          value: 7,
        },
        {
          name: "南风",
          value: 6,
        },
        {
          name: "西北风",
          value: 5,
        },
        {
          name: "北风",
          value: 4,
        },
        {
          name: "闪电",
          value: 3,
        },
      ];

      this.option = {
        tooltip: {
          trigger: "item",
          backgroundColor: "transparent",
          padding: 0,
          formatter: (params) => {
            return mountComponent(DefaultTooltip, {
              props: { data: params.data.extra },
            }).$el;
          },
        },
        // tooltip: {
        //   show: true,
        //   position: "top",
        //   textStyle: {
        //     fontSize: 14,
        //   },
        // },
        series: [
          {
            type: "wordCloud",
            // 网格大小，各项之间间距
            gridSize: 38,
            // 形状 circle 圆，cardioid  心， diamond 菱形，
            // triangle-forward 、triangle 三角，star五角星
            shape: "circle",
            // 字体大小范围
            sizeRange: [14, 30],
            // 文字旋转角度范围
            rotationRange: [0, 0],
            // 旋转步值
            // rotationStep: 90,
            // 自定义图形
            // maskImage: maskImage,
            left: "center",
            top: "center",
            right: null,
            bottom: null,
            // 画布宽
            width: "90%",
            // 画布高
            height: "80%",
            // 是否渲染超出画布的文字
            drawOutOfBound: false,
            textStyle: {
              normal: {
                color: function () {
                  return (
                    "rgb(" +
                    [
                      Math.round(Math.random() * 200 + 55),
                      Math.round(Math.random() * 200 + 55),
                      Math.round(Math.random() * 200 + 55),
                    ].join(",") +
                    ")"
                  );
                },
              },
              emphasis: {
                shadowBlur: 10,
                shadowColor: "#2ac",
              },
            },
            data: datas,
          },
        ],
      };
    },
  },
};
</script>
<style lang="scss" scoped>
.expert-age {
  width: 100%;
  box-sizing: border-box;
  background-size: 100% 100%;
  // background-image: url("@/assets/screen/c3.png");
  // height: 3.39rem;
}
</style>
